import { handleSubReview } from '@/services/center';
import { Button, Flex, Form, Input, message, Modal, Rate, Typography } from 'antd';
import { useIntl } from 'umi';
type Props = {
  visible: boolean;
  handleOk: (value: any) => void;
  data: Partial<Center.ProductList>;
  onCancel: () => void;
};
const CommentModal: React.FC<Props> = ({ visible, onCancel, handleOk, data }) => {
  const intl = useIntl();
  const { merchantName, merchantLogo, productName, id } = data;

  return (
    <Modal
      onOk={handleOk}
      width={677}
      title={
        <div
          style={{
            textAlign: 'center',

            fontSize: 26,
            color: '#0f294d',
            fontWeight: 700,
            marginBottom: 38,
          }}
        >
          {intl.formatMessage({ id: 'home.i_comment' })}
        </div>
      }
      destroyOnClose
      footer={null}
      onCancel={onCancel}
      styles={{
        content: {
          background: 'linear-gradient(180deg, #D8ECFF 0%, #FFFFFF 24%)',
          padding: '30px 50px 41px',
        },
        header: {
          background: 'transparent',
        },
      }}
      open={visible}
    >
      <Flex align="center" style={{ marginBottom: 24 }} gap={9}>
        <img src={merchantLogo} height={30} />
        <Typography.Text
          style={{ fontSize: 20, color: '#0F294D', fontWeight: 700 }}
          ellipsis={{
            tooltip: (
              <div>
                {merchantName}「{productName}」
              </div>
            ),
          }}
        >
          {merchantName}「{productName}」
        </Typography.Text>
      </Flex>
      <Form
        onFinish={async (value: any) => {
          const { code, data } = await handleSubReview({
            ...value,
            productId: id,
          });
          if (code == '100200') {
            message.success({
              content: intl.formatMessage({ id: 'home.comment_suc' }),
              className: 'msg_center',
            });
            handleOk({ ...data, productId: id });
          }
        }}
        requiredMark={false}
        colon={false}
      >
        <Form.Item
          name="score"
          label={intl.formatMessage({ id: 'home.comment_score' })}
          rules={[{ required: true }]}
        >
          <Rate
            allowHalf
            character={
              <svg
                width="26"
                height="24"
                viewBox="0 0 26 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.19929 23.7857C6.60235 23.7857 6.02072 23.602 5.53092 23.2346C4.64317 22.5918 4.2146 21.5204 4.39827 20.4489L5.10235 16.3163C5.19419 15.7806 5.01052 15.2448 4.62786 14.8775L1.61256 11.9387C0.831944 11.1734 0.556434 10.0561 0.893169 9.01525C1.2299 7.97444 2.11766 7.22444 3.20439 7.07138L7.35235 6.47444C7.88807 6.39791 8.34725 6.06117 8.57684 5.58668L10.4289 1.82138C10.9187 0.826478 11.8983 0.214233 13.0003 0.214233C14.1024 0.214233 15.0819 0.826478 15.5564 1.80607L17.4238 5.57138C17.6687 6.04587 18.1279 6.3826 18.6483 6.45913L22.7962 7.05607C23.883 7.20913 24.7707 7.95913 25.1075 8.99995C25.4442 10.0408 25.1687 11.1581 24.3881 11.9234L21.3881 14.8469C21.0054 15.2142 20.8217 15.7653 20.9136 16.2857L21.6177 20.4183C21.8013 21.505 21.3728 22.5612 20.485 23.204C19.5972 23.8469 18.4493 23.9234 17.485 23.4183L13.7656 21.505C13.2911 21.2601 12.7248 21.2601 12.2503 21.505L8.53092 23.4642C8.10235 23.6785 7.64317 23.7857 7.19929 23.7857Z"
                  fill="currentcolor"
                />
              </svg>
            }
          />
        </Form.Item>
        <Form.Item
          name="content"
          labelCol={{ span: 24 }}
          label={intl.formatMessage({ id: 'home.comment_word' })}
          rules={[{ required: true, min: 5 }]}
        >
          <Input.TextArea
            placeholder={intl.formatMessage({ id: 'home.input_comment' })}
            style={{ borderRadius: 0, height: 175, resize: 'none' }}
            maxLength={100}
          />
        </Form.Item>

        <Form.Item style={{ margin: '45px 0  0' }}>
          <Flex justify="center">
            <Button
              htmlType="submit"
              type="primary"
              style={{
                height: '60px',
                minWidth: 200,
                display: 'flex',
                border: 'none',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {intl.formatMessage({ id: 'home.submit_comment_word' })}
            </Button>
          </Flex>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default CommentModal;
